<template>
    
    <div id="pageMain">
        <div id="row01">
            <div class="left">
                <div class="item">
                    <div class="title">今日申领场所码</div>
                    <div class="total">累计申领 {{claimStat.claimCsCount | numFormat}} 个</div>
                    <div class="today">
                        <div class="val">{{claimStat.todayClaimCsCount | numFormat}}<span> 个</span></div>
                        <div class="increase">较昨日 
                            <span v-if="claimStat.todayClaimCsPercentage < 0" class="down"><i class="el-icon-caret-bottom"></i>{{claimStat.todayClaimCsPercentage | numToPercent}}</span>
                            <span v-else class="up"><i class="el-icon-caret-top"></i>{{claimStat.todayClaimCsPercentage | numToPercent}}</span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="title">今日新增申领机构</div>
                    <div class="total">累计注册机构 {{claimStat.registerOrgCount | numFormat}} 个</div>
                    <div class="today">
                        <div class="val">{{claimStat.todayRegisterOrgCount | numFormat}}<span> 个</span></div>
                        <div class="increase">较昨日 
                            <span v-if="claimStat.todayRegisterOrgPercentage < 0" class="down"><i class="el-icon-caret-bottom"></i>{{claimStat.todayRegisterOrgPercentage | numToPercent}}</span>
                            <span v-else class="up"><i class="el-icon-caret-top"></i>{{claimStat.todayRegisterOrgPercentage | numToPercent}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="item">
                    <div class="title">今日活跃场所码</div>
                    <div class="total">累计注册场所 {{claimStat.activeCsCount | numFormat}} 个</div>
                    <div class="today">
                        <div class="val">{{claimStat.todayActiveCsCount | numFormat}}<span> 个</span></div>
                        <div class="increase">较昨日 
                            <span v-if="claimStat.todayActiveCsPercentage < 0" class="down"><i class="el-icon-caret-bottom"></i>{{claimStat.todayActiveCsPercentage | numToPercent}}</span>
                            <span v-else class="up"><i class="el-icon-caret-top"></i>{{claimStat.todayActiveCsPercentage | numToPercent}}</span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="title">今日预警场所</div>
                    <div class="total">累计预警场所 {{claimStat.warningCsCount | numFormat}} 个</div>
                    <div class="today">
                        <div class="val">{{claimStat.todayWarningCsCount | numFormat}}<span> 个</span></div>
                        <div class="increase">较昨日 
                            <span v-if="claimStat.todayWarningCsPercentage < 0" class="down"><i class="el-icon-caret-bottom"></i>{{claimStat.todayWarningCsPercentage | numToPercent}}</span>
                            <span v-else class="up"><i class="el-icon-caret-top"></i>{{claimStat.todayWarningCsPercentage | numToPercent}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="row02">
            <div class="item">
                <div class="title">
                    <div class="text">地区申请场所码统计 <span>单位：个</span></div>
                    <div class="button">
                        <div :class="areaType==1?'selected':''" @click.stop="changeArea_click(1)">当日</div>
                        <div :class="areaType==2?'selected':''" @click.stop="changeArea_click(2)">累计</div>
                    </div>
                </div>
                <div id="areaChart"></div>
            </div>
            <div class="item">
                <div class="title">
                    <div class="text">动态预警信息</div>
                </div>
                <div class="content">
                    <div class="item">
                        <div class="info">
                            <div class="title"><img src="../../assets/ico01.png"/>贵阳龙洞堡机场</div>
                            <div class="area">贵阳市南明区 2021-12-23 16:00:00</div>
                        </div>
                        <div class="warningRed">红色重点人员扫码</div>
                    </div>
                    <div class="item">
                        <div class="info">
                            <div class="title"><img src="../../assets/ico01.png"/>贵阳龙洞堡机场</div>
                            <div class="area">贵阳市南明区 2021-12-23 16:00:00</div>
                        </div>
                        <div class="warningRed">红色重点人员扫码</div>
                    </div>
                    <div class="item">
                        <div class="info">
                            <div class="title"><img src="../../assets/ico01.png"/>贵阳龙洞堡机场</div>
                            <div class="area">贵阳市南明区 2021-12-23 16:00:00</div>
                        </div>
                        <div class="warningYellow">黄色重点人员扫码</div>
                    </div>
                    <div class="item">
                        <div class="info">
                            <div class="title"><img src="../../assets/ico01.png"/>贵阳龙洞堡机场</div>
                            <div class="area">贵阳市南明区 2021-12-23 16:00:00</div>
                        </div>
                        <div class="warningRed">红色重点人员扫码</div>
                    </div>
                    <div class="item">
                        <div class="info">
                            <div class="title"><img src="../../assets/ico01.png"/>贵阳龙洞堡机场</div>
                            <div class="area">贵阳市南明区 2021-12-23 16:00:00</div>
                        </div>
                        <div class="warningRed">红色重点人员扫码</div>
                    </div>
                </div>
            </div>
        </div>

        <div id="row03">
            <div class="item">
                <div class="title">
                    <div class="text">高频扫码场所TOP10 <span>单位：次</span></div>
                </div>
                <div id="scanChart"></div>
            </div>
            <div class="item">
                <div class="title">
                    <div class="text">场所码类型统计</div>
                </div>
                <div id="typeChart"></div>
            </div>
        </div>

    </div>
</template>

<script>
import {selectCsInfoTypeStat, selectCsInfoClaimStat, selectCsInfoAreaClaimStat} from '@/http/apiUrls.js';
import { Bar } from "@antv/g2plot";
import { Area } from "@antv/g2plot";
import { Pie } from '@antv/g2plot';

    export default {
        data() {
            return {
                areaChartPlot: null,
                claimStat: {
                    todayClaimCsCount: null, // 今日申领场所码：单位：个
                    todayClaimCsPercentage: 0, // 今日申领场所码较昨日百分比
                    claimCsCount: null, // 累计申领场所码
                    todayRegisterOrgCount: null, // 今日新增申领机构：单位：个
                    todayRegisterOrgPercentage: 0, // 今日新增申领机构较昨日百分比
                    registerOrgCount: null, // 累计注册机构：单位：个
                    todayActiveCsCount: null, // 今日活跃场所码：单位：个
                    todayActiveCsPercentage: 0, // 今日活跃场所码较昨日百分比
                    activeCsCount: null, // 累计活跃场所
                    todayWarningCsCount: null, // 今日预警场所：单位：个
                    todayWarningCsPercentage: 0, // 今日预警场所较昨日百分比
                    warningCsCount: null, // 累计预警场所：单位：个
                },

                //场所码统计类型 1:当时 2:累计
                areaType: 1,
                //地区申请场所码统计测试数据
                areaChart: [
                    { name: "贵阳市", value: 78364, },
                    { name: "遵义市", value: 67832 },
                    { name: "铜仁市", value: 56738 },
                    { name: "毕节市", value: 55923 },
                    { name: "六盘水市", value: 49847 },
                    { name: "黔东南州", value: 45982 },
                    { name: "黔南州", value: 35003 },
                    { name: "黔西南州", value: 32913 },
                    { name: "安顺市", value: 25003 }
                ],

                //高频扫码场所TOP10
                scanChart: [
                    { name: "活跃场所码", date: "4-12", value: 12632, },
                    { name: "活跃场所码", date: "4-13", value: 8454 },
                    { name: "活跃场所码", date: "4-14", value: 30393 },
                    { name: "活跃场所码", date: "4-15", value: 28731 },
                    { name: "活跃场所码", date: "4-16", value: 3612 },
                    { name: "活跃场所码", date: "4-17", value: 47212 },
                    { name: "活跃场所码", date: "4-18", value: 16872 },
                    { name: "活跃场所码", date: "4-19", value: 18272 },
                    { name: "活跃场所码", date: "4-20", value: 18732 },
                    { name: "活跃场所码", date: "4-21", value: 17622 },
                    { name: "活跃场所码", date: "4-22", value: 11283 },
                    { name: "活跃场所码", date: "4-23", value: 19012 },
                    { name: "活跃场所码", date: "4-24", value: 25823 },
                    { name: "活跃场所码", date: "4-25", value: 21001 },
                    { name: "活跃场所码", date: "4-26", value: 17653 },
                    { name: "申领场所码", date: "4-12", value: 13632, },
                    { name: "申领场所码", date: "4-13", value: 4454 },
                    { name: "申领场所码", date: "4-14", value: 20393 },
                    { name: "申领场所码", date: "4-15", value: 29731 },
                    { name: "申领场所码", date: "4-16", value: 9612 },
                    { name: "申领场所码", date: "4-17", value: 37212 },
                    { name: "申领场所码", date: "4-18", value: 36872 },
                    { name: "申领场所码", date: "4-19", value: 28272 },
                    { name: "申领场所码", date: "4-20", value: 28732 },
                    { name: "申领场所码", date: "4-21", value: 27622 },
                    { name: "申领场所码", date: "4-22", value: 11283 },
                    { name: "申领场所码", date: "4-23", value: 13012 },
                    { name: "申领场所码", date: "4-24", value: 29823 },
                    { name: "申领场所码", date: "4-25", value: 28001 },
                    { name: "申领场所码", date: "4-26", value: 14653 }
                ],
            }
        },
        
        mounted: function(){
            // 场所码类型
            this.getTypeChartData();
            // // 今日场所码、今日机构、活跃场所、预警场所统计
            this.getCsInfoClaimStat();
            // // 地区申领场所码统计，单位：个
            this.getCsInfoAreaClaimStat(true, true);
            // 高频扫码场所
            this.getScanChartData();
        },
        methods: {
            getTypeChartData(){
                this.$postJson(selectCsInfoTypeStat, {}).then(res => {
                    if(res && res.csInfoStatisticsDTOList){
                        this.initTypeChart(res.csInfoStatisticsDTOList);
                    }
                })
            },
            getCsInfoClaimStat(){
                this.$postJson(selectCsInfoClaimStat, {}).then(res => {
                    if(res){
                        this.claimStat = res
                    }
                })
            },
            getCsInfoAreaClaimStat(isInit, isToday){
                const requestData = {
                    todayFlag: isToday
                }
                this.$postJson(selectCsInfoAreaClaimStat, requestData).then(res => {
                    if(res){
                        if(isInit){
                            this.initAreaChart(res);
                        }else{
                            if(this.areaChartPlot){
                                this.areaChartPlot.changeData(res)
                            }
                        }
                    }
                })
            },
            getScanChartData(){
                this.initScanChart(this.scanChart);
                // this.$postJson(selectCsInfoTypeStat, {}).then(res => {
                //     if(res && res.csInfoStatisticsDTOList){
                //         this.initScanChart(res.csInfoStatisticsDTOList);
                //     }
                // })
            },
            //改变场所码统计类型
            changeArea_click: function(areaType) {
                this.areaType = areaType;
                this.getCsInfoAreaClaimStat(false, (areaType==1?true:false))
            },

            //初始化地区申请场所码统计
            initAreaChart(items) {
                const barPlot = new Bar("areaChart", {
                    data: items,
                    xField: "count",
                    yField: "areaAddress",
                    // padding: [10, 50, 20, 100],
                    padding: 'auto',
                    width: 1,//解决超出宽度
                    label: {
                        position: "right",
                        offset: 5,
                    },
                    color: "#5cdebf",
                    meta: {
                        areaAddress: {
                            alias: "地区",
                        },
                        count: {
                            alias: "申请数量",
                        },
                    },
                });
                this.areaChartPlot = barPlot;
                barPlot.render();
            },

            //初始化场所码趋势统计
            initScanChart: function (items){
                const area = new Area("scanChart", {
                    data: items,
                    xField: "date",
                    yField: "value",
                    seriesField: "name",
                    width: 1,//解决超出宽度
                    meta: {
                        value: {
                            formatter: (v) => `${v} 个`,
                        },
                    },
                    areaStyle: (type) => {
                        return {
                            fill: type.name == "活跃场所码" ?
                            "l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff":
                            "l(270) 0:#ffffff 0.5:#a0d8cb 1:#5cdebf",
                        };
                    },
                });
                area.render();
            },

            //初始化场所码类型统计
            initTypeChart: function (items){
                const piePlot = new Pie("typeChart", {
                    appendPadding: 10,
                    data: items,
                    angleField: "count",
                    colorField: "typeFirst",
                    radius: 1,
                    innerRadius: 0.64,
                    meta: {
                        value: {
                            formatter: (v) => `${v} 个`,
                        },
                    },
                    label: {
                        type: "inner",
                        offset: "-50%",
                        autoRotate: false,
                        style: { textAlign: "center",  fontSize: "14"},
                        formatter: ({ percent }) => `${(percent * 100).toFixed(1)}%`,
                    },
                    statistic: {
                        title: {
                            offsetY: -8,
                            customHtml: (container, view, datum) => {
                              // const { width, height } = container.getBoundingClientRect();
                              // const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
                              const text = datum ? datum.typeFirst : '总计';
                              return text;
                              // return renderStatistic(d, text, { fontSize: 28 });
                            },
                        },
                        content: {
                            offsetY: -4,
                        },
                    },
                    // 添加 中心统计文本 交互
                    interactions: [
                    { type: 'element-selected' },
                    { type: 'element-active' },
                    {
                        type: 'pie-statistic-active',
                        cfg: {
                        start: [
                            { trigger: 'element:mouseenter', action: 'pie-statistic:change' },
                            { trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' },
                        ],
                        end: [
                            { trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
                            { trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' },
                        ],
                        },
                    },
                    ],
                });
                piePlot.render();
            }

        }
    }
</script>

<style scoped>

    #pageMain{
        padding-bottom: 20px;
    }

    /******** 统计信息 *********/  

    #row01{
        display: flex;
        padding: 20px 20px 15px 20px;
        font-size: 0.9rem;
    }

    #row01 > .left{
        flex: 1;
        display: flex;
        margin-right: 15px;
    }

    #row01 > .right{
        flex: 1;
        display: flex;
    }

    #row01 .item{
        flex: 1;
        background-color: white;
        border-radius: 5px;
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-right: 15px;
    }

    #row01 .item:last-child{
        margin-right: 0px;
    }

    #row01 .item > .title{
        font-weight: bold;
    }

    #row01 .item > .total{
        color: #979fb9;
        margin-top: 7px;
    }

    #row01 .item > .today{
        margin-top: 15px;
        display: flex;
        align-items: center;
    }

    #row01 .item > .today > .val{
        flex: 6;
        font-size: 2rem;
        font-weight: bold;
    }

    #row01 .item > .today > .val > span{
        font-size: 0.9rem;
        font-weight: normal;
    }

    #row01 .item > .today > .increase{
        flex: 4;
        color: #979fb9;
        font-size: 0.8rem;
        text-align: right;
    }

    #row01 .item > .today > .increase > .up{
        color: #44d196;
    }

    #row01 .item > .today > .increase > .down{
        color: #d14444;
    }

    /******** 地区申请场所码统计 和 动态预警信息 *********/  

    #row02{
        display: flex;
        padding: 0px 20px 0px 20px;
    }

    #row02 > .item{
        flex: 1;
        background-color: white;
        border-radius: 5px;
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
        margin-right: 15px;
    }

    #row02 > .item:last-child{
        margin-right: 0px;
    }

    #row02 > .item > .title{
        display: flex;
        align-items: center;
        padding: 20px 0px 20px 0px;
        border-bottom: solid 1px #e6e6e6;
    }

    #row02 > .item > .title > .text{
        flex: 1;
        margin: 0px 0px 0px 20px;
        font-weight: bold;
        height: 34px;
        display: flex;
        align-items: center;
    }

    #row02 > .item > .title > .text > span{
        font-size: 0.8rem;
        color: #979fb9;
        font-weight: normal;
        padding-left: 10px;
    }

    #row02 > .item > .title > .button{
        width: 100px;
        height: 34px;
        padding: 2px;
        background-color: #f4f5f9;
        display: flex;
        margin-right: 20px;
        border-radius: 3px;
    }

    #row02 > .item > .title > .button > div{
        font-size: 0.9rem;
        width: 50px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 3px;
    }

    #row02 > .item > .title > .button > .selected{
        background-color: white;
    }

    #areaChart{
        padding: 20px;
    }

    #row02 > .item > .content{
        padding: 0px 20px 0px 20px;
    }

    #row02 > .item > .content > .item{
        display: flex;
        align-items: center;
        border-bottom: solid 1px #e6e6e6;
        padding:20px 0px 20px 0px;
    }

    #row02 > .item > .content > .item:hover{
        background-color: #fbfbfb;
        cursor: pointer;
    }

    #row02 > .item > .content > .item:last-child{
        border-bottom: none;
    }

    #row02 > .item > .content > .item > .info{
        flex: 6;
    }

    #row02 > .item > .content > .item > .info > .title{
        display: flex;
        align-items: center;
    }

    #row02 > .item > .content > .item > .info > .title > img{
        width: 20px;
        height: auto;
        display: block;
        margin-right: 5px;
    }

    #row02 > .item > .content > .item > .info > .area{
        font-size: 0.8rem;
        color: #979fb9;
        margin-top: 8px;
    }

    #row02 > .item > .content > .item > .warningRed{
        background-color: #ffe5e5;
        color: #e52a27;
        border-radius: 3px;
        padding: 5px;
    }

    #row02 > .item > .content > .item > .warningYellow{
        background-color: #ffefde;
        color: #ff8102;
        border-radius: 3px;
        padding: 5px;
    }

    /******** 高频扫码场所TOP10 和 场所码类型统计 *********/  

    #row03{
        display: flex;
        padding: 0px 20px 0px 20px;
        margin-top: 15px;
    }

    #row03 > .item{
        flex: 1;
        background-color: white;
        border-radius: 5px;
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
        margin-right: 15px;
    }

    #row03 > .item:last-child{
        margin-right: 0px;
    }

    #row03 > .item > .title{
        display: flex;
        align-items: center;
        padding: 20px 0px 20px 0px;
        border-bottom: solid 1px #e6e6e6;
    }

    #row03 > .item > .title > .text{
        flex: 1;
        margin: 0px 0px 0px 20px;
        font-weight: bold;
        height: 34px;
        display: flex;
        align-items: center;
    }

    #row03 > .item > .title > .text > span{
        font-size: 0.8rem;
        color: #979fb9;
        font-weight: normal;
        padding-left: 10px;
    }

    #scanChart{
        padding: 20px;
    }

    #typeChart{
        padding: 20px;
    }
</style>